import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { registerApplication, start } from 'single-spa';


const loadScript = async (url)=> {
  await new Promise((resolve,reject)=>{
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script)
  });
}
// single-spa的缺点
// 不够灵活，不能动态加载js文件
// 样式不隔离
// 没有js沙箱机制
registerApplication(
  'myvueApp ', //子应用名字
  async ()=>{ // Promise
    console.log( '加载模块')
    // 动态创建Script标签，必须有顺序
    await loadScript('http://localhost:10000/js/chunk-vendors.js');
    await loadScript('http://localhost:10000/js/app.js');
    return window.singleVue
  },
  location => location.pathname.startsWith('/vue'), //用户切换到了/vue的路径下，需要加载刚才定义的子应用
  {a:1,b:2 } //自定义属性可以传给子应用
)
registerApplication(
  'myvueApp2 ', //子应用名字
  async ()=>{ // Promise
    console.log( '加载模块')
    // 动态创建Script标签，必须有顺序
    await loadScript('http://localhost:20000/js/chunk-vendors.js');
    await loadScript('http://localhost:20000/js/app.js');
    return window.singleVue2
  },
  location => location.pathname.startsWith('/vue2'), //用户切换到了/vue的路径下，需要加载刚才定义的子应用
  {a:1,b:2 } //自定义属性可以传给子应用
)
start();


Vue.config.productionTip = false //阻止显示生产模式的消息。
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
